<template>
  <div id="map"></div>
</template>

<script>
import { Map, View } from "ol";
import { OSM, XYZ } from "ol/source";
import { Tile } from "ol/layer";
import { Projection, addProjection } from "ol/proj";
import * as olProj from "ol/proj";
import {
  addCoordinateTransforms,
  addEquivalentTransforms,
  equivalent,
  transform,
  getTransform,
  transformExtent,
  get,
  fromLonLat,
  toLonLat,
} from "ol/proj";

export default {
  name: "ProjectTransformMethod",
  data() {
    return {};
  },
  mounted() {
    //初始化地图
    this.Map = new Map({
      target: "map", //指定挂载dom，注意必须是id
      layers: [
        new Tile({
          source: new OSM(), //加载OpenStreetMap
        }),
      ],
      //配置视图
      view: new View({
        center: [113.24981689453125, 23.126468438108688], //视图中心位置
        projection: "EPSG:4326", //指定投影
        zoom: 12, //缩放到的级别
      }),
    });

    // 使用 proj4 自定义 3395 的投影并添加到 openlayers 上
    var projection3395 = new Projection({
      code: "EPSG:3395",
      extent: [
        -20037508.342789244, -20037508.342789244, 20037508.342789244,
        20037508.342789244,
      ],
      units: "m",
      axisOrientation: "enu",
    });
    // 定义3395坐标系，且与其他 4326、3857 的互相转换
    // Proj4.default.defs(
    //   "EPSG:3395",
    //   "+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"
    // );

    // console.log(Proj4);

    // 将投影对象添加到可由其代码查找的受支持投影的列表中
    addProjection(projection3395);

    console.log(olProj);

    // 获取当前代码的投影对象
    let project = get("EPSG:3395");
    console.log(project);

    // addCoordinateTransforms(
    //   "EPSG:4326",
    //   "EPSG:3857",
    //   function (coordinate) {
    //     return transform(coordinate, "EPSG:4326", "EPSG:3857");
    //   },
    //   function (coordinate) {
    //     return transform(coordinate, "EPSG:3857", "EPSG:4326");
    //   }
    // )
    let obj = transform([118, 32], "EPSG:4326", "EPSG:3857");
    console.log(obj);

    let to_lon_lat = toLonLat(
      [13135699.913606284, 3763310.6271446524],
      "EPSG:3857"
    );
    console.log(to_lon_lat);

    let from_lon_lat = fromLonLat([118, 32], "EPSG:3857");
    console.log(from_lon_lat);

    let get_transform = getTransform("EPSG:4326", "EPSG:3857");
    console.log(get_transform);

    let transform_extent = transformExtent([76,18,140,56],"EPSG:4326" , "EPSG:3857");
    console.log(transform_extent);

    let equal = equivalent(get("EPSG:4326") , get("EPSG:3857"));
    console.log(equal);
  },
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>